<!-- 详情 -->
<template>
	<view class="content">
		<!-- 头部 -->
		<view class="title-gradient">
		</view>
		<view class="content-box" :style="{'height':bodyList[0].orderState == 0?'92vh':'100vh'  } ">
			<!-- 头部卡片1 -->
			<view class="title-card">
				<!-- 卡片内容 -->
				<view class="body-item" :key="index" v-for="(item,index) in bodyList">
					<!-- 内容头部 -->
					<view class="body-item-title">
						<text v-if="item.orderState == 0" style="color: #F5A623;">待支付</text>
						<text v-else-if="item.orderState == 1" style="color: #979797;">进行中</text>
						<text v-else-if="item.orderState == 2" style="color: #7ED321;">已完成</text>
						<text v-else-if="item.orderState == 4" style="color: red;">退款成功</text>
						<text v-else style="color: red;">申请退款中</text>
						<text style="font-size: 27rpx;color: #666666;" v-if="item.orderState== 0"
							@click="cancellation(item)">取消订单</text>


					</view>
					<!-- 内容中心 -->
					<view class="body-item-body">
						<view>
							<text class="order-number">订单编号:</text>
							<text class="order-number-orderId">{{item.orderId}}</text>
						</view>
						<view style="margin: 15rpx 0;">
							<text>下单时间</text>
							<text class="place-an-order">{{item.orderPlace}}</text>
						</view>
						<view class="counselling">
							<text class="counselling-time">辅导时间</text>
							<view id="_body-item-text">
								<text :key="zi.fid" v-for="zi in item.counDtos">{{zi.time}} {{zi.fid}} :
									<!-- <text :key="z" v-for="(z,index) in zi.childLevel">
										{{z.name}} ，</text> -->
									<text :key="z" v-for="(z,index) in zi.childLevel">
										{{ z}} {{ zi.childLevel[zi.childLevel.length-1]===z?'':',' }}</text>
								</text>
							</view>
						</view>
						<view>
							<text class="Tutoring-subjects">辅导科目</text>
							<text>{{item.subjectsDtos[0].name ||''}} {{item.subjectsDtos[0].subjectsName ||''}}</text>
						</view>
					</view>
					<!-- 内容底部 -->
					<view class="body-item-foot">
						<text>订单金额</text>
						<text class="Amount">{{item.orderMoney==0 ?0.01 :item.orderMoney}}元</text>
					</view>
				</view>
			</view>

			<!-- 中间 卡片2 -->
			<view class="title-card">
				<!-- 卡片内容 -->
				<view class="body-item" :key="index">
					<!-- 内容头部 -->
					<view class="body-item-title">
						<text class="Tutor-information">家教老师信息</text>

						<view @click="teacherSend(teacherList.id)" class="see-more">
							<view style="display: flex;">查看更多 <u-icon name="arrow-right" color="#ccc"
									size="18"></u-icon> </view>
							<!-- <van-icon name="arrow" /> -->


						</view>
					</view>
					<!-- 内容中心 -->
					<view class="body-item-body">
						<!-- 图片 -->
						<view class="body-item-img">

							<image :key="imi" v-for="imi in teacherList.educPhotos"
								:src=" 'https://educationafter.jinghaischool.com'+  imi.photoName"></image>

						</view>
						<!-- 信息 -->
						<view class="card-text">
							<view>
								<text>姓名</text>
								<text style="font-weight: 600;color: #333333;">{{teacherList.educName}}</text>
							</view>

							<view>
								<text>ID</text>
								<text>{{teacherList.educId}}</text>
							</view>

							<view>
								<text>性别</text>
								<view class="gender">
									<text
										:style="[{'color': teacherList.educSex == 0 ? '#ec808d' : '#5eb9e9'},{'min-width': '20rpx'}]">{{teacherList.educSex == 0 ? '男' : '女'}}</text>
									<view v-if="teacherList.educSex === 0" class=" female">
										♀ </view>
									<view v-else class=" male">
										♂</view>
								</view>
							</view>
							<view>
								<text>类型</text>
								<text v-if="teacherList.educType == 0" class="types-of">在校大学生</text>
								<text v-if="teacherList.educType == 1" class="types-of">在校研究生</text>
								<text v-if="teacherList.educType == 2" class="types-of">专业教师</text>
								<text v-if="teacherList.educType == 3" class="types-of">其他</text>
							</view>

							<view>
								<text>教龄</text>
								<text>{{teacherList.educYears}}</text>
							</view>

							<view>
								<text>籍贯</text>
								<text>{{teacherList.educAddress}}</text>
							</view>

							<view>
								<text>现住址</text>
								<text>{{teacherList.educCurrent}}</text>
							</view>
						</view>
					</view>

				</view>

			</view>

			<!-- 最后 卡片3 -->
			<view class="title-card" :key="item.counsellingName" v-for="item in bodyList">
				<!-- 卡片内容 -->
				<view class="body-item">
					<!-- 内容头部 -->
					<view class="body-item-title">
						<text style="color: #ec808d;font-size: 27rpx;">辅导对象信息</text>

						<view @click="sendInfo(item)" style="font-size: 27rpx;color: #b5bfbf; display: flex;">
							<view style="display: flex;">查看更多 <u-icon name="arrow-right" color="#ccc"
									size="18"></u-icon> </view>
							<!-- <van-icon name="arrow" /> -->

						</view>
					</view>
					<!-- 内容中心 -->
					<view class="body-item-body">

						<!-- 信息 -->
						<view class="card-text">
							<view>
								<text>姓名</text>
								<text style="font-weight: 600;color: #333333;">{{item.counsellingName}}</text>
							</view>

							<view>
								<text>性别</text>
								<text>{{item.counsellingSex == 0 ? '男' : '女'}}</text>
							</view>


							<view>
								<text>年龄</text>
								<text>{{item.age}}岁 ({{item.counsellingBirth}}出生)</text>
							</view>

							<view>
								<text>科目</text>
								<!-- <text>{{item.subjectsDtos.name}}{{item.subjectsDtos.subjectsName}}</text> -->
								<text>{{item.subjectsDtos[0].name ||''}}
									{{item.subjectsDtos[0].subjectsName ||''}}</text>
							</view>

							<view>
								<text>基本情况</text>
								<text>{{item.counsellingBasic}}</text>
							</view>

							<view>
								<text>备注</text>
								<text>{{item.counsellingNotes ?item.counsellingNotes : '暂未录入'}}</text>
							</view>
						</view>
					</view>

				</view>

			</view>

			<view class="floor" v-if="bodyList[0].orderState == 0">
				<button class="floor-box" @click="lijizhifu()">立即支付</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		findById,
		Modification
	} from '../../api/indent/index.js'
	import {
		coachingTargets
	} from '../../api/my/index.js'
	import {
		payOrder
	} from "api/index/index.js"
	export default {
		data() {
			return {
				// 内容集合
				bodyList: [],
				//家教老师信息
				teacherList: {}
			}
		},
		onLoad(info) {

			// console.log(JSON.parse(info.obj))
			this.bodyList = [JSON.parse(info.obj)]
			findById({
				id: this.bodyList[0].teacherId
			}).then(res => {
				console.log(res)
				this.teacherList = res.data

			})
		},
		mounted() {
			// uni.$http.get('educ/teacher/findById', {
			// 	id: this.bodyList[0].teacherId
			// }).then(res => {
			// 	this.teacherList = res.data.data
			// 	console.log(res.data)
			// })
		},
		methods: {
			// 取消订单
			cancellation(e) {
				console.log(e);
				Modification({
					id: e.id,
					orderState: e.orderState
				}).then(res => {
					// console.log(res);
					if (res.code === 200) {

						uni.showToast({
							title: '成功取消订单',
							icon: 'none'
						});
						uni.switchTab({
							url: '/pages/indent/indent'
						})
					}

				})
			},
			// 跳转 辅导对象详情
			sendInfo(info) {
				console.log(info, '辅导对象');
				coachingTargets({
					userId: uni.getStorageSync('openId'),
				}).then(res => {
					// 判断当前辅导对象是否还存在，如果不存在就显示辅导对象已不存在
					res.rows.forEach(el => {
						if (el.counsellingName != info.counsellingName) {
							uni.showToast({
								title: '当前辅导对象已不存在',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'none',
								//显示持续时间为 2秒
								duration: 3000
							})
						} else {
							uni.navigateTo({
								url: `/pages/basicInformation/basicInformation?targetsName=${info.counsellingName}`
							})
						}
					})
				})

			},
			//跳转老师详情
			teacherSend(val) {
				let data = {
					teacherId: val,
					position: '订单'
				}
				uni.navigateTo({
					url: '/components/teacherDetails/teacherDetails?data=' + JSON.stringify(data)
				});
			},
			// 立即支付
			lijizhifu() {

				// console.log(this.bodyList[0]);
				let fId = 0
				let childLevel = ''
				let selectedTimeData = []
				// console.log(this.bodyList[0].counDtos);
				this.bodyList[0].counDtos.forEach(el => {
					console.log(el.fid);
					el.childLevel.forEach(e => {
						if (el.fId == '周一') {
							fId = 111
						} else if (el.fid == '周二') {
							fId = 112
						} else if (el.fid == '周三') {
							fId = 113
						} else if (el.fid == '周四') {
							fId = 114
						} else if (el.fid == '周五') {
							fId = 115
						} else if (el.fid == '周六') {
							fId = 116
						} else {
							// console.log(el.fid);
							fId = 117
						}

						if (e == '上午') {
							childLevel = 'morning'
							selectedTimeData.push({
								childLevel: childLevel,
								fId: fId,
								hours: new Date(el.time)
							})
						} else if (e == '下午') {
							childLevel = 'afternoon'
							selectedTimeData.push({
								childLevel: childLevel,
								fId: fId,
								hours: new Date(el.time)
							})
						} else if (e == '晚上') {
							childLevel = 'night'
							selectedTimeData.push({
								childLevel: childLevel,
								fId: fId,
								hours: new Date(el.time)
							})
						} else {

						}
					})


				})

				console.log(this.bodyList[0]);
				let obj = {
					// 价格
					rechargePrice: this.bodyList[0].orderMoney,
					// openId
					openId: uni.getStorageSync('openId'),
					// 家教Id
					teacherId: this.bodyList[0].teacherId,
					// 辅导对象ID
					targetsId: this.bodyList[0].targetsId,
					// 辅导订单时间
					orderCounList: selectedTimeData,
					// 订单编号
					orderId: this.bodyList[0].orderId
				}
				console.log('111');
				payOrder(obj).then(res => {
					wx.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success(res) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						},
						fail(e) {}
					})
				})

			},

		}
	}
</script>

<style scoped>
	.content {
		background-color: #f6f7f6;
		width: 100%;
		min-height: 100vh;
	}

	.content-box {
		position: relative;
		z-index: 100;
		width: 100%;
		height: 90vh;
		overflow: scroll;

	}

	.body-item {
		background-color: #ffffff;
		width: 100%;
		margin-bottom: 30rpx;
		border-radius: 18rpx;
		padding: 35rpx 0;
	}

	.body-item-title {
		padding-top: 25rpx;
		width: 90%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.body-item-body {
		padding: 10rpx 0;
		width: 90%;
		margin: 0 auto;
	}

	.body-item-body view {
		margin: 10rpx 0;
	}

	.body-item-body text {
		font-size: 25rpx;
		color: #666666;
	}

	.body-item-foot {
		padding-bottom: 25rpx;
		width: 90%;
		margin: 0 auto;
	}

	.body-item-foot text {
		font-size: 25rpx;
	}

	#_body-item-text {
		display: flex;
		flex-direction: column;
	}

	#_body-item-text text {

		margin-bottom: 30rpx;
	}

	.body-item-img {
		display: flex;
		margin-top: 15rpx;
	}

	.body-item-img image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}


	.title-gradient {
		position: fixed;
		background-image: linear-gradient(to bottom, #04bc16, #FFFFFF);
		height: 200rpx;
		width: 100%;
	}

	.title-card {
		padding: 0 15rpx;
		border-radius: 15rpx;
	}

	.card-text {
		margin-top: 15rpx;
	}

	.card-text text {
		font-size: 25rpx;
		display: block;
		min-width: 150rpx;
		margin-top: 15rpx;
	}

	.card-text>view {
		display: flex;
		flex-direction: row;
	}

	.order-number {
		font-weight: 600;
		font-size: 27rpx;
	}

	.order-number-orderId {
		font-weight: 600;
		margin-left: 25rpx;
		font-size: 27rpx;
	}

	.place-an-order {
		margin-left: 40rpx;
	}

	.counselling {
		display: flex;
	}

	.counselling-time {
		display: block;
		margin-right: 40rpx;
	}

	.Tutoring-subjects {
		margin-right: 40rpx;
	}

	.Amount {
		font-weight: 600;
		margin-left: 40rpx;
	}

	.Tutor-information {
		color: #ec808d;
		font-size: 27rpx;
	}

	.see-more {
		font-size: 27rpx;
		color: #b5bfbf;
	}

	.gender {
		display: flex;
		/* align-items: center; */
		margin: 0rpx !important;
	}

	.male {
		margin: 13rpx 0 0 15rpx !important;
		color: #ffffff;
		background-color: #ec808d;
		font-size: 25rpx;
		border-radius: 180rpx;
		height: 35rpx;
		width: 35rpx;
		text-align: center;
	}

	.female {
		margin: 13rpx 0 0 15rpx !important;
		/* margin-top: 10rpx;
		margin-left: 10rpx; */
		color: #ffffff;
		background-color: #5eb9e9;
		font-size: 25rpx;
		border-radius: 180rpx;
		height: 35rpx;
		width: 35rpx;
		text-align: center;
	}

	.floor {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		padding: 25rpx 0;
	}

	.floor-box {
		background-color: #04bc16;
		color: #ffffff;
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
	}

	.types-of {
		text-align: center;
		background-color: #ffb142;
		color: #ffffff !important;
		padding: 2rpx 10rpx;
		min-width: 20rpx;
		border-radius: 5rpx;
	}
</style>